<template>
  <div>
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :columns="columns"
      :tableData="tableData"
      :pagination-display="paginationDisplay"
      @handleTableData="handleTableData"
    >
      <el-table-column label="进度" slot="progress" width="200px">
        <template #default="{ row }">
          <el-progress
            v-if="row.nowPackNum && row.bTotalPackNum"
            :text-inside="true"
            :stroke-width="20"
            :percentage="(row.nowPackNum / row.bTotalPackNum) * 100"
            status="success"
          ></el-progress>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </TableSearch>
    <DeviceVersion
      :visible.sync="deviceVersionVisible"
      :device-id="deviceId"
    ></DeviceVersion>
    <BatchOta
      @refreshTable="refreshTable"
      v-if="batchOtaVisible"
      :visible.sync="batchOtaVisible"
    ></BatchOta>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import DeviceVersion from './components/DeviceVersion'
import BatchOta from './components/BatchOta'
import {
  queryVersionUpResult,
  versionUpStop,
  versionUpResultToExcel,
} from '@/api/device'
import formatter from '@/utils/format'
import { exportExcel } from '@/utils'
export default {
  name: 'DeviceUpgrade',
  components: { TableSearch, DeviceVersion, BatchOta },
  data() {
    return {
      paginationDisplay: false,
      timer: null,
      deviceVersionVisible: false,
      batchOtaVisible: false,
      deviceId: '',
      tableBtns: [
        {
          label: '批量升级数据导入',
          click: this.handleBatchUpload,
          icon: 'el-icon-plus',
          resourceId: '/web/device-management/device-upgrade/批量升级设备导入',
        },
        {
          label: '(下载Excel导入模板)',
          isDownload: true,
          href: require('../../assets/batchTemplate/批量升级设备模板.xlsx'),
          fileName: '批量升级设备模板',
        },
        {
          label: '导出失败记录',
          click: this.handleExport,
          icon: 'el-icon-download',
          resourceId: '/web/device-management/device-upgrade/导出失败记录',
        },
      ],
      columns: [
        {
          label: '设备ID',
          prop: 'deviceId',
          resourceId: '/web/device-management/device-upgrade/设备ID',
        },
        {
          label: '升级前版本',
          prop: 'deviceOtaUpVo.deviceVersion',
          resourceId: '/web/device-management/device-upgrade/升级前版本',
        },
        {
          label: '升级状态',
          prop: 'result',
          formatter,
          resourceId: '/web/device-management/device-upgrade/升级状态',
        },
        {
          label: '错误码',
          prop: 'state',
          resourceId: '/web/device-management/device-upgrade/错误码',
        },
        {
          label: '失败原因',
          prop: 'failReason',
          resourceId: '/web/device-management/device-upgrade/失败原因',
        },
        {
          slot: 'progress',
          resourceId: '/web/device-management/device-upgrade/进度',
        },
        {
          label: '操作',
          resourceId: '/web/device-management/device-upgrade/操作',
          buttons: [
            {
              label: '查询版本',
              size: 'small',
              click: this.handleVersion,
              resourceId: '/web/device-management/device-upgrade/查询版本',
            },
            {
              label: '停止',
              size: 'small',
              click: this.handleStopUpgrade,
              resourceId: '/web/device-management/device-upgrade/停止',
              disabled: (row) => {
                return row.isEnd
              },
            },
          ],
        },
      ],
      tableData: {},
    }
  },
  mounted() {
    this.timer = setInterval(this.handleTableData, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    handleTableData() {
      queryVersionUpResult().then((res) => {
        this.tableData = {
          list: res,
          totalCount: res.length,
        }
        let isAllEnd = true
        res.forEach((item) => {
          if (!item.isEnd) {
            isAllEnd = false
          }
        })
        if (isAllEnd && this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
      })
    },
    refreshTable() {
      this.$refs['tableSearch'].refreshTable()
    },
    handleBatchUpload() {
      this.batchOtaVisible = true
    },
    handleExport() {
      versionUpResultToExcel().then((res) => {
        exportExcel(res, '失败记录')
      })
    },
    handleVersion(row) {
      this.deviceVersionVisible = true
      this.deviceId = row.deviceId
    },
    handleStopUpgrade(row) {
      this.$confirm(`您确定要停止设备为${row.deviceId}的升级吗?？`, '提示', {
        center: true,
        customClass: 'tip-dialog__wrapper',
      }).then(() => {
        versionUpStop({ deviceId: row.deviceId }).then(
          () => {
            this.$message({
              type: 'success',
              message: '操作成功',
            })
            this.handleTableData()
          },
          () => {
            this.handleTableData()
          }
        )
      })
    },
  },
}
</script>
